<template>
	<view class="container">



		<!--  -->
		<view class="fix-title">
			<view class="invite_info">
				<view class="invite_info_item">
					<text style="color: #000;font-size: 28rpx;">有效邀请人数</text>
					<view style="position: relative;">
						<view class="tips3" style="right:-65%;top:-75%">
							<uni-tooltip :styleType="1" :styleType2="1" content="黑色:本月有效邀请的雇员 紫色:本月有效邀请的雇主">
								<image src="../../static/helpwen.png" mode="widthFix"></image>
							</uni-tooltip>
						</view>
						<text class="invite_info_item_num">{{yxgy}}</text>
						<text class="invite_info_item_num" style="color: #A277FA">+{{yxgz}}</text>
					</view>
				</view>
				<view class="invite_info_border"></view>
				<view class="invite_info_item">
					<text style="color: #000;font-size: 28rpx;">累计邀请人数</text>
					<view>
						<text class="invite_info_item_num">{{leijiRenshu}}</text>
					</view>
				</view>


			</view>
		</view>

		<view class="detail">
			<view class="detail-box">
				<view class="detail-box-inner">
					<view class="titile">
						<image src="../../static/yqjl-2.png" mode="widthFix"></image>
					</view>
					<scroll-view scroll-y="true" class="scroll-list" :scroll-anchoring="true">
						<view class="list-item" v-for="(item, index) in userList" :key="item.id"
							v-if="userList.length > 0">
							<view class="list-item-left">
								<image :src="item.pic" mode="widthFix"></image>
								<view class="list-item-left-botoom" v-if="item.status!=1&&item.userType1==0">
									<text >雇员</text>
								</view>
								<view class="list-item-left-botoom" style="background: #FF7357;" v-if="item.status!=1&&item.userType1==1">
									<text >雇主</text>
								</view>
							</view>
							<view class="list-item-right">
								<view class="yizhongzhi" v-if="item.status==3">
									已终止
								</view>
								<view class="list-item-right-top">
									<view class="name">{{item.toUserName}}</view>
									<view class="tixing2" v-if="item.status==0 && item.userType1==1" @click="tipsClick(item.toUserId)">
										<text>提醒好友发布任务</text>
									</view>
									<view class="tixing1" v-if="item.status==0 && item.userType1==0" @click="tipsClick(item.toUserId)">
										<text>提醒好友接取任务</text>
									</view>
									<view class="zhuangtai" v-if="item.status==0">
										待激活
									</view>
									<view class="zhuangtai" v-if="item.status==1">
										解封中
									</view>
						
								</view>
								<view class="list-item-right-botoom">
									<view class="shuiyin" v-if="item.status==2">
										<image src="../../static/shuiyin.png" mode="widthFix"></image>
									</view>
									<view class="list-item-right-botoom-left">
										注册时间：{{ item.creatTimes.slice(0, 11) }}
									</view>
									<!--  -->
									<view class="list-item-right-botoom-right"
									:style="{'margin-top':item.status==2?'-50rpx':''}"
										 v-if="item.status!=1">
										+{{item.invitationPrice}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>



				</view>
			</view>
		</view>












	</view>
</template>

<script>
	import {
		baseURL
	} from '@/config'
	import uniTooltip from '@/components/uni-tooltip/uni-tooltip.vue'
	export default {
		components: {
			uniTooltip
		},
		data() {
			return {
				userList: [],
				yxgy: 0,
				yxgz: 0,
				leijiRenshu: 0
			}
		},
		onLoad(options) {
			console.log(options)
			this.yxgy = options.xygy
			this.yxgz = options.xygz
			this.leijiRenshu = options.leijiRenshu
			this.imgPath = uni.getStorageSync('imgPath')

			this.my_sub1()
		},
		methods: {
			async tipsClick(toUid) {
				let ress = await this.$fetch(this.$api.inv_comp_task, {
					toId:toUid
				}, 'PUT')
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				
				
				uni.showToast({
					title: '已提醒成功',
					icon: 'none'
				});
			},
			async my_sub1() {
				let ress = await this.$fetch(this.$api.my_sub_in, {
					pageNum: 0,
					pageSize: 10000
				}, 'POST')
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				ress.rows.forEach(item => {
					item.avatar = item.toAvaer ? item.toAvaer : ''
					item.pic = this.imgPath + item.avatar
				})
				this.userList = [...this.userList, ...ress.rows]
				console.log(this.userList)
				// console.log(ress)
			},

		},

		onShow() {

		},
		onHide() {

		},
		beforeDestroy() {

		},
		onUnload() {

		},
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F3E9C9;
	}

	.container {
		// border: 1px solid #FCC928;
		width: 100%;
		// height: 100vh;
		// background: red;
		z-index: 99999;

		.phone {
			width: 130rpx;
			height: 50rpx;
			position: fixed;
			z-index: 99999999;
			top: 330rpx;
			right: 0;
			border-radius: 67rpx 0 0 67rpx;
			background-color: rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: row;
			align-items: center;

			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 13rpx;
				margin-right: 13rpx;
			}

			&>text {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 28rpx;
			}
		}

		.fix-title {
			z-index: 1;
			width: 100vw;
			height: 200rpx;
			// position: fixed;
			background-color: #fbc831;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.invite_info {
			width: 690rpx;
			height: 200rpx;
			background: #FFFFFF;
			margin-top: 70rpx;
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			// position: sticky;


			// margin-top: 100rpx;
			// top: calc(44px + 30rpx + var(--status-bar-height));

			.invite_info_item {
				height: 84rpx;
				width: 224rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tips3 {
					position: absolute;
					right: 8%;
					top: 10%;
					z-index: 9;

					// width: 50rpx;
					// border: 1px solid;
					image {
						width: 54rpx;
						height: 100%;
					}
				}

				&>text {
					font-size: 20rpx;
					font-weight: 400;
					color: #A5A5A5;
					line-height: 20rpx;
				}

				&>view {
					margin-top: 36rpx;

					&>image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.invite_info_border {
				width: 1rpx;
				height: 74rpx;
				border-left: 1rpx solid rgba(252, 201, 40, 0.5);
			}

			.invite_info_item_num {
				font-size: 36rpx;
				font-weight: 600;
				color: #402110;
				line-height: 45rpx;
			}

			.invite_info_item_num1 {
				font-size: 48rpx;
				font-weight: 500;
				color: #FE4B28;
				line-height: 45rpx;
			}





		}

		.detail {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 70rpx;

			.detail-box {
				width: 93%;
				height: calc(100vh - 400rpx);
				border: 1px solid;
				background: #FFEACF;
				border-radius: 15rpx;
				box-shadow: 0px 1px 8px #fff;
				border: 1px solid #f5f5f5;
				display: flex;
				justify-content: center;
				align-items: center;

				.detail-box-inner {
					width: 88%;
					height: 90%;
					background: #fff;
					border-radius: 10rpx;

					.titile {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 20rpx 0;

						image {
							width: 390rpx;
							height: 100%;
						}

					}

					.scroll-list {
						width: 90%;
						height: 86%;
						display: flex;
						margin: 0 auto;

						// padding-top: 20rpx;
						// border: 1px solid;
						.list-item {
							width: 100%;
							height: 150rpx;
							background: #FEF7ED;
							margin-bottom: 20rpx;
							border-radius: 7rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.list-item-left {
								display: flex;
								justify-content: center;
								align-items: center;
								flex-direction: column;
								width: 120rpx;

								// border: 1px solid;
								image {
									width: 90rpx;
									height: 100%;
									border-radius: 50%;
								}

								.list-item-left-botoom {
									width: 70rpx;
									height: 30rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 30rpx;
									font-size: 22rpx;
									margin-top: -10rpx;
									z-index: 999;
									background: #F39B19;
									color: #fff;
								}
							}

							.list-item-right {
								flex: 1;
								height: 100%;
								padding-right: 20rpx;
								display: flex;
								justify-content: center;
								align-items: space-between;
								flex-direction: column;
								position: relative;

								.yizhongzhi {
									position: absolute;
									right: 0;
									bottom: 15%;
									width: 100rpx;
									height: 100rpx;
									// border: 1px solid;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #F39B19;
									font-size: 24rpx;
									font-weight: 600;
								}

								// border: 1px solid;
								.list-item-right-top {
									display: flex;
									justify-content: space-between;
									align-items: center;
									padding-bottom: 15rpx;

									.name {
										width: 120rpx;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
										text-align: left;
										color: #F39B19;
										font-size: 30rpx;
										font-weight: 600;

									}

									.tixing1 {
										// width: 200rpx;
										// height: 40rpx;
										background: #F39B19;
										color: #fff;
										font-size: 22rpx;
										border-radius: 20rpx;
										padding: 4rpx 15rpx;
									}

									.tixing2 {
										// width: 200rpx;
										// height: 40rpx;
										background: #FF7357;
										color: #fff;
										font-size: 22rpx;
										border-radius: 20rpx;
										padding: 4rpx 15rpx;
									}

									.zhuangtai {
										font-size: 22rpx;
										color: #F39B19;
									}
								}

								.list-item-right-botoom {
									display: flex;
									justify-content: space-between;
									align-items: center;
									position: relative;

									.shuiyin {
										position: absolute;
										top: -58rpx;
										right: 80rpx;
										width: 110rpx;

										// height: 80rpx;
										// border: 1px solid;
										image {
											width: 100%;
											height: 100%;
										}
									}

									.list-item-right-botoom-left {
										font-size: 22rpx;
										color: #999;
									}

									.list-item-right-botoom-right {
										font-size: 36rpx;
										font-weight: 600;
										color: #F39B19;
									}
								}




							}
						}
					}
				}
			}
		}


	}
</style>
